<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>display:flex和display:inline-flex;对z-index的影响</title>
        <script>!function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);</script>
        <link rel="stylesheet" href="../css/base.css" />
        <link rel="stylesheet" href="../css/common.css" />
        <style>
            @keyframes fadeIn {
              0% { 
                opacity: 0;
              }
              100% {
                opacity: 1;
              }
            }

            .box {
              width: 256px; height: 191px;
              position: relative;
            }
            .text {
              line-height: 30px;
              position: absolute; left: 0; right: 0; bottom: 0;
              background-color: rgba(0,0,0,.5);
              color: #fff;
              text-align: center;
              font-size: 14px;
            }
            .fade {
              -webkit-animation: fadeIn 2s 2s infinite;
              animation: fadeIn 2s 2s infinite; 
            }
        </style>
    </head>
    <body>
        <h1></h1>
        <p><a href="https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/">来源</a></p>
        <h2>图片显示时，文字被遮盖</h2>
        <div class="box">               
            <span class="text">快播的辩词再精彩 也不配赢得掌声</span>
            <img class="fade" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
        </div>
        <div class="box">               
            <span class="text">快播的辩词再精彩 也不配赢得掌声</span>
            <img style="opacity:1" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
        </div>
        <h2>解决办法</h2>
        <div class="box">               
            <img class="fade" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
            <span class="text">快播的辩词再精彩 也不配赢得掌声</span>
        </div>
        <p>要知道，opacity的值不是1的时候，是具有层叠上下文的，层叠顺序是z-index:auto级别，跟没有z-index值的absolute绝对定位元素是平起平坐的。而本demo中的文字元素在图片元素的前面，于是，当CSS3动画只要不是最终一瞬间的opacity: 1，位于DOM流后面的图片就会遵循“后来居上”准则，覆盖文字。</p>
        <p>这就是原因，于是，我们想要解决这个问题就很简单。</p>
        <p>1. 调整DOM流的先后顺序；</p>
        <p>2. 提高文字的层叠顺序，例如，设置z-index:1;</p>
    </body>
</html>